<!-- 
/* ************************************************************************
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 * 
 * 
 ************************************************************************
 *		本代码已经过佛祖开光处理，佛祖保佑，永不宕机，永无BUG。
 *		文件名称：略
 *		简要描述：商品项组件 
 *		作   者：Frank
 *		创建日期：2023/07/13
 *		联系方式：邮箱: goodboybbc@outlook.com, 微信：goodboybbc 可提供后台源码(Node.js开发)和数据库(MySQL)

 *		Copyright(c)	2023-2033   Frank   本项目已取得软件著作权和备案，仅供学习研究。软件著作权登记号：软著登字第12572259号 备案号:川公网安备51012202001748 蜀ICP备2024058077号-1 
 ********************************修改记录********************************
		作	者			修改日期				修改内容 
		Frank			2023/07/13			创建文件
 *************************************************************************/	
 -->
<template>
	<view class="commodity">
		<view class="commodity-box">
			<image class="commodity-img-main" :src="commodity.main_img" mode="" @tap='onDetail'></image>
			<image class="commodity-img-gfzp" src="../static/img/fuli/gfzp.png" mode=""></image>
			<view class="commodity-name">{{commodity.name}}</view>
			<view class="commodity-price">
				<view class="commodity-price-left">
					<image class="commodity-price-left-img" src="../static/img/common/sj36.png" mode=""></image>
					<text class="commodity-price-left-text"> {{commodity.crystal}}</text>
				</view>
				<view class="commodity-price-right">
					已兑{{commodity.pay_num}}
				</view>
			</view>
			<view class="commodity-btn get-crystal-bgc" v-if="commodity.crystal > userStore.user.crystal" @tap="onBtnGetCrystal">
				<image  class="commodity-btn-img" src="../static/img/fuli/get_crystal.png" mode=""></image>
			</view>
			<view class="commodity-btn exchange-bgc" v-else @tap="onBtnExchange">
				<image class="commodity-btn-img" src="../static/img/fuli/exchange.png" mode="" ></image>				
			</view>
		</view>
	</view>
</template>

<script>
	import { mapStores, mapActions, mapState } from 'pinia'
	import { userStore } from '@/store/modules/userStore.js'
	export default {
		name:"CommodityItem",
		props:{
			commodity:Object,
			cateId:Number,
			commodityIdx:Number
		},
		data() {
			return {
				
			};
		},
		
		computed:{
			...mapStores(userStore)
		},
		
		methods:{
			onBtnGetCrystal(){
				uni.switchTab({
					url:'/pages/crystal/crystal'
				})
			},
			onDetail(){
				let url = '../../pages/commodity-detail/commodity-detail?cateId='+this.cateId+'&commodityIdx=' + this.commodityIdx;

				uni.navigateTo({
					url
					});					
			},
			onBtnExchange(){
				let url = '../../pages/commodity-detail/commodity-detail?cateId='+this.cateId+'&commodityIdx=' + this.commodityIdx;

				uni.navigateTo({
					url
					});				
			}
		}
		
	}
</script>

<style scoped>
	.commodity{
		padding:0rpx 16rpx 16rpx;
		width: 375rpx;   /* 375rpx */;
		height: 526rpx;
		display: inline-block;
	}
	.commodity-box{
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
 		position: relative;
		left: 0;
		top:0; 
	}
	.commodity-img-gfzp{
		position: absolute;
		top:0;
		right: 0;
		width: 100rpx;
		height: 100rpx;
	}
	.commodity-img-main{
		width: 200rpx;  /* 174rpx */
		height: 230rpx;
	}
	.commodity-name{
		color:#423E57;
		font-size: 28rpx;
		font-weight: bold;
		padding: 5rpx 16rpx;
		height: 105rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp:3;
		-webkit-box-orient:vertical;
		word-break: break-all;
	}
	.commodity-price{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0rpx;
	}
	.commodity-price-left{
		padding: 5rpx 16rpx;
		display: flex;
		align-items: center;
	}
	.commodity-price-left-img{
		width: 48rpx;
		height: 48rpx;
	}
	.commodity-price-left-text{
		padding-left: 5rpx;
		color: #3410a9;
		font-size: 28rpx;
		font-weight: bold;
	}
	.commodity-price-right{
		padding: 5rpx 16rpx;
		font-size: 28rpx;
		color:#969AB3;
	}
	.commodity-btn{
		border-radius: 40rpx;
		width: 300rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.get-crystal-bgc{
		background-color: #3D2998;
	}
	.exchange-bgc{
/* 		background-color: #ABA6FD; */
		background-color: #A47FFF;
	}
	.commodity-btn-img{
		width: 166rpx;
		height: 36rpx;
	}
</style>